<template>
  <div class="audio-list">
    <!-- 音频列表 -->
    <div ref="mescroll" class="mescroll">
      <div class="tab">       
        <tab
          active-color = "#333333"
          default-color = "#ccc"
          custom-bar-width = "0"
          >
          <tab-item v-for="(item, index) in columns" :selected="(index == 0) ? true: false" :key="index" @on-item-click="onItemClick(item.id)">{{item.title}}</tab-item>
        </tab>
        <div class="recommend">
          <div class="item-list" v-for="(item, index) in audio_list" :key='index' @click="router({path: './audioList', query: {id: item.id}})">
            <div class="img">
              <img src="@/assets/home-img1.png">
            </div>
            <div class="con">
               <p class="tip">{{item.title}}</p>
               <p class="video-num">共{{item.count}}节</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Tab, TabItem } from 'vux'
import { get_freeAudioLists_cate1, get_column_cate, baseUrl } from '@/api/api'
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
export default {
  components: {
    Tab, 
    TabItem
  },
  data () {
    return {
      audio_list: [],
      columns: [],
      mescroll: null, //mescroll实例对象
    }
  },
  created () {
    this.cate_id = this.$route.query.cate_id
    this.column_id = this.$route.query.column_id
    this.get_column_cates()
  },
  mounted () {
    this.mescroll = new MeScroll(this.$refs.mescroll, { 
      up: {
        callback: this.upCallback
      }
    })
  },
  methods: {    
    onItemClick (index) {
      this.audio_list = []
      this.cate_id = index
      this.mescroll.resetUpScroll()
    },
    router (path) {
      this.$router.push(path)
    },
    get_column_cates () {
      get_column_cate(this.column_id).then((res) => {
        this.columns = res.data.info
      }).catch((err) => {
        console.dir(err)
      })
    },
    upCallback (page) {      
      get_freeAudioLists_cate1(this.cate_id, page.num, page.size).then((res) => {
        if (page.num == 1){
          this.audio_list = []
        }
        if(res.data == null){
          console.log(1)
          this.mescroll.endErr()
          return
        }
        this.$nextTick(() => {
          this.mescroll.endSuccess(res.data.length);
        })
        this.audio_list = this.audio_list.concat(res.data)
      }).catch((err) => {
        console.dir(err)
        this.mescroll.endErr()
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
  .audio-list
    .mescroll
      position fixed
      top 0
      bottom 0
      height auto
    .tab
      .vux-tab-item
        font-size 1.6rem
        font-weight 500
    .recommend
      background #fff
      .item-list
        display flex
        padding 2rem 0
        margin 0 1.5rem
        border-bottom 1px solid #e6e6e6
        .img
          width 12rem
          min-width 12rem
          max-width 12rem
          height 9rem
          border-radius .4rem
          overflow hidden
          position: relative
          margin-right 1.5rem
          img
            width 100%
            height 100%
        .con
          position relative
          .tip
            font-size: 1.5rem;
            line-height: 2.4rem;
            color: #333;
            font-weight: bold;
            height: 4.8rem;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          .video-num
            line-height 1.4rem
            font-size 1.2rem
            color #999
            position absolute
            bottom .3rem
</style>